<template>
    <div class="favor">
        <div  class="title">
            <svg class="icon" aria-hidden="true" @click="goToAside()">
                <use xlink:href="#icon-cebianlanzhankai"></use>
            </svg>
            <h3>点赞列表</h3>
        </div>       
        <div class="favor-list">
            <div v-for="(agency,index) in agencyList" :key="index" class="favor-item"  @click="gotoAgency(agency.aid)">
                <div  class="agency-img">
                    <img :src="agency.profile" 
                      alt="">
                </div>        
                <div class="agency-basic-info">            
                    <div class="agency-title">              
                        <p>{{agency.real_name}}</p>
                        <svg class="icon index-icon love grey" aria-hidden="true" v-if="agency.status === 2" @click.stop="dianzan(index,agency.status,agency.aid)">
                            <use xlink:href="#icon-shoucang1"></use>
                        </svg>
                        <svg class="icon index-icon love" aria-hidden="true" v-if="agency.status === 1" @click.stop="dianzan(index,agency.status,agency.aid)">
                            <use xlink:href="#icon-aixin1"></use>
                        </svg>
                    </div>          
                    <p>有几只宠物</p>
                </div> 
            </div>
        </div>
    </div>
</template>
<script>
import PBack from '@/components/back.vue'
import { getAgencyInfo,updateLike } from '@/api.js'
export default {
    components:{
        PBack
    },
    data() {
        return {
            agencyList:[],
            aixin:false
        }
    },
    created() {
        this.getAgencyInfo()
    },
    methods:{
        gotoAgency(aid) {
            this.$router.push('/agency/'+aid)
        } ,
        async dianzan(index,status,aid) {
            if (status === 1){ 
                this.agencyList[index].status =2; 
                this.aixin = false 
            }else if(status === 2){ 
                this.agencyList[index].status =1; 
                this.aixin = true 
                }
            let params = {aid,user_id:JSON.parse(localStorage.getItem('user')),status:this.agencyList[index].status}
            const { data } =await updateLike(params)
            console.log(data)
        },
        goToAside() {
            this.$router.push('/aside')
        },
        async getAgencyInfo() {
            let params = {user_id:JSON.parse(localStorage.getItem('user'))}
            await getAgencyInfo(params).then( res => {
                let agencyList = res.data
                this.agencyList = agencyList.filter((value) => {
                    return value.status === 1
                })
            })
        },
    }
}
</script>
<style lang="less" scoped>
.favor{
    overflow:hidden;
    .title{
        position: fixed;
        background: white;
        width: 100%;
        padding:0.5rem 0.5rem 0;
        display: flex;
        align-items: center;
        .icon {
            width: 0.8rem;
        }
        h3{
            margin: 0 auto;
            font-size: 0.45rem;
        }
    }
    .favor-list{
        padding:0.5rem;
        margin-top: 1.5rem;
        column-count:2;
        column-gap:0.3rem;
        .favor-item{
            // margin-bottom: 0.4rem;
            border-radius: 0.2rem;
            height: 100%;
            overflow: auto;
            .agency-img{
                width:100%;
                height: auto;
                overflow:hidden;
                img{
                    width: 100%;
                    height: auto;
                }
            }
            .agency-basic-info{
                padding: 0.25rem 0.15rem 0.5rem;
                font-size: 0.3rem;
                color: #a09ea0;
                .agency-title{
                    font-size: 0.4rem;
                    color: #38383b;
                    display: flex;
                    justify-content: space-between;
                    font-weight:bold;
                    height: 0.5rem;
                    @keyframes hovermove {
                    from {height: 0;}
                    to {height: 1.3em;}
                    }
                    .love{
                    height: 1.3em;
                    width: 1.3em;
                    animation: hovermove 0.3s;
                    }
                    .grey{
                        height: 1.5em;
                        width: 1.5em;
                        margin-top: -0.04rem;
                        animation: hovermove 0.3s;
                    }
                }
            }
        }
    }
}
</style>